<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8">

  <base href="../">

  <title>Landing - Product</title>



  <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />

  <meta name="description" content="Powerful and easy to use software to build professional websites, blogs or ecommerce stores" />
  <meta name="keywords" content="cms, page builder, drag and drop, ecommerce, ecommerce platform, designer, developer, php, bootstrap 5">
  <meta name="author" content="Vvveb">
  <link rel="canonical" href="https://www.vvveb.com/">


  <!-- Facebook Meta Tags -->
  <meta property="og:locale" content="en_US" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Powerful and easy to use software to build professional websites, blogs or ecommerce stores" />
  <meta property="og:description" content="Vvveb cms - Powerful and easy to use software to build professional websites, blogs or ecommerce stores" />
  <meta property="og:url" content="https://vvveb.com/" />
  <meta property="og:site_name" content="Vvveb CMS" />
  <meta property="og:image" content="" />
  <meta property="article:modified_time" content="2023-02-05T14:45:53+00:00" />


  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:domain" content="demo.vvveb.com">
  <meta property="twitter:url" content="//demo.vvveb.com/hello-world-1">
  <meta name="twitter:title" content="Begin each day by telling yourself">
  <meta name="twitter:description" content="Powerful and easy to use software to build professional websites, blogs or ecommerce stores.">
  <meta name="twitter:image" content="">
  <meta name="twitter:site" content="//demo.vvveb.com/hello-world-1" />
  <meta name="twitter:label1" content="Est. reading time" />
  <meta name="twitter:data1" content="3 minutes" />

  <meta itemprop="name" content="Vvveb">
  <meta itemprop="description" content="Powerful and easy to use software to build professional websites, blogs or ecommerce stores.">
  <meta itemprop="url" content="https://www.vvveb.com/">
  <meta itemprop="keywords" content="cms, page builder, drag and drop, ecommerce, ecommerce platform, designer, developer, php, bootstrap 5">
  <meta itemprop="image" content="/img/favicon/228x228.png">
  <meta itemprop="sourceOrganization" content="Vvveb">
  <meta itemprop="inLanguage" content="en-US">

  <script type="application/ld+json" id="ldJsonScript">
   {
	  "@context": "http://schema.org",
	  "@graph": [
		{
		  "@type": "Organization",
		  "@id": "https://www.vvveb.com/#organization",
		  "url": "https://www.vvveb.com",
		  "logo": "https://www.vvveb.com/img/favicon/256x256.png",
		  "sameAs": [
			"https://twitter.com/vvveb",
			"https://www.facebook.com/vvveb.com",
			"https://youtube.com/vvveb",
			"https://www.linkedin.com/company/vvveb-com",
			"https://plus.google.com/+VvvebCom"
		  ]
		},
		{
		  "@type": "WebSite",
		  "@id": "https://www.vvveb.com/#website",
		  "url": "https://www.vvveb.com",
		  "name": "Vvveb"
		},
		{
		  "@type": "WebPage",
		  "@id": "https://www.vvveb.com/#webpage",
		  "url": "https://www.vvveb.com/",
		  "name": "Vvveb"
		}
	  ]
	}
</script>


  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@vvveb">

  <meta name="twitter:label1" content="Platform">
  <meta name="twitter:data1" content="Vvveb">
  <meta name="twitter:label2" content="Software">
  <meta name="twitter:data2" content="CMS">


  <meta property="og:title" content="Vvveb">
  <meta property="og:site_name" content="Vvveb">
  <meta property="og:url" content="https://www.vvveb.com/">
  <meta property="og:description" content="Powerful and easy to use software to build professional websites, blogs or ecommerce stores">
  <meta property="fb:app_id" content="">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="en_US">
  <meta property="og:image" content="https://www.vvveb.com/img/favicon/228x228.png">



  <!-- HTML Meta Tags -->
  <title>Begin each day by telling yourself</title>
  <meta name="description" content="Powerful and easy to use software to build professional websites, blogs or ecommerce stores.">





  <link id="landing-css" href="css/style.bundle.css" rel="stylesheet" media="screen">
  <link id="vvvebjs-css" href="css/custom.css" rel="stylesheet" media="screen">








  <link rel="alternate" type="application/rss+xml" title="Feed" href="/feed/posts" />
  <link rel="alternate" type="application/rss+xml" title="Comments Feed" href="/feed/comments" />

  <link rel="icon" type="image/x-icon" href="../../media/favicon.ico" data-v-global-site.favicon>

  <link rel="manifest" href="/manifest.webmanifest">

  <link rel="alternate" hreflang="" href="" />
</head>


<body>

  <nav class="navigation-1 clearfix" data-v-save-global="blank.html,.navigation-1">

    <div id="top" class="top-nav clearfix">
      <div class="container">
        <div class="d-flex justify-content-between  flex-md-row d-flex flex-column flex-md-row">
          <div class="nav">
            <ul class="list-inline" data-v-component-site>
              <li class="list-inline-item" data-v-if="site.description.phone-number">
                <a href="tel:5511112377" class="p-2 p-md-0" title="Phone" data-v-site-description-phone-number>
                  <i class="la la-phone"></i>
                  <span class=" text-muted" data-v-site-description-phone-number>+55 (111) 123 777</span>
                </a>
              </li>
              <li class="list-inline-item" data-v-if="site.contact-email">
                <a href="mailto:contact@mysite.com" class="p-2 p-md-0" title="Email" data-v-site-contact-email>
                  <i class="la la-envelope"></i>
                  <span class=" text-muted" data-v-site-contact-email>contact@mysite.com</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="nav">
            <ul class="list-inline">
              <!--
					<li class="list-inline-item"><a href="#" id="wishlist-total" title="Wish List (0)"><i class="la la-heart"></i> <span class="">Favorites</span></a></li>
					<li class="list-inline-item"><a href="#" title="Checkout"><i class="la la-share"></i> <span class="">Checkout</span></a></li>
					<li class="list-inline-item">
						<div class="dropdown">
							<a href="" class="dropdown-toggle" data-bs-toggle="dropdown" role="button"><i class="la la-user"></i> <span class="">My Account</span></i></a>
							<ul class="dropdown-menu dropdown-menu-right">
								<li><a href="#" class="dropdown-item">Register</a></li>
								<li><a href="#" class="dropdown-item">Login</a></li>
							</ul>
						</div>
					</li>
					-->
              <li class="list-inline-item">
                <div data-v-component-currency>
                  <form method="post" enctype="multipart/form-data" id="form-currency">

                    <a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Currency " aria-expanded="false">
                      <!-- <i class="la la-dollar-sign me-1"></i> -->
                      <span class="" data-v-currency-info-name>USD</span>
                    </a>


                    <div class="dropdown-menu dropdown-menu-end">

                      <div data-v-currency>
                        <button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
                          <span data-v-currency-sign_start>€</span>
                          <span data-v-currency-sign_end>€</span>
                          <span class="ms-1" data-v-currency-name>Euro</span>
                        </button>
                      </div>

                      <div data-v-currency>
                        <button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
                          <span data-v-currency-sign_start>£</span>
                          <span data-v-currency-sign_end>£</span>
                          <span class="ms-1" data-v-currency-name>Pound Sterling</span>
                        </button>
                      </div>

                      <div data-v-currency>
                        <button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
                          <span data-v-currency-sign_start>$</span>
                          <span data-v-currency-sign_end>$</span>
                          <span class="ms-1" data-v-currency-name>US Dollar</span>
                        </button>
                      </div>

                    </div>
                  </form>
                </div>
              </li>
              <li class="list-inline-item">
                <div data-v-component-language>
                  <form method="post" enctype="multipart/form-data" id="form-language">

                    <a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
                      <!-- <i class="la la-flag me-1"></i> -->
                      <!-- 
									<img src="" data-v-language-info-img>
									-->
                      <span class="" data-v-language-info-name>English</span>
                    </a>


                    <div class="dropdown-menu dropdown-menu-end">

                      <div data-v-language>
                        <button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
                          <!-- <i class="la la-flag la-lg me-2"></i> -->
                          <img src="" loading="lazy" class="me-1" data-v-language-img>

                          <!-- <a href="" data-v-language-url> -->
                          <span data-v-language-name>English</span>
                          <!-- </a> -->
                        </button>
                      </div>

                      <div data-v-language>
                        <button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
                          <!-- <i class="la la-flag la-lg me-2"></i> -->
                          <img src="" loading="lazy" class="me-1" data-v-language-img>
                          <!-- <a href="" data-v-language-url>  -->
                          <span data-v-language-name>Romanian</span>
                          <!-- </a>  -->
                        </button>
                      </div>

                    </div>
                  </form>
                </div>
              </li>
              <li class="list-inline-item">

                <a id="color-theme-switch" class="p-2 p-md-0" href="javascript:void(0);" role="button" title="Switch sidebar color theme">
                  <i class="la la-sun la-lg"></i>
                </a>

              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="navbar navbar-expand-md">

      <div class="container">
        <div data-v-component-site>
          <a class="navbar-brand" href="/" data-v-url-params='{"host":"www.*.*"}'>
            <span class="visually-hidden">Logo</span>
            <img src="img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
            <img src="img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
            <img src="img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
            <img src="img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
          </a>
        </div>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
          <ul class="navbar-nav ms-auto" data-v-menu-items>
            <li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0" data-v-class-if-position-static="category.has-text">

              <a class="nav-link dropdown-toggle" href="#" data-v-class-if-dropdown-toggle="category.children > 0" data-v-class-if-active="category.active" aria-expanded="false" data-v-menu-item-url>
                <span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
                <span data-v-menu-item-content>
                  <p>
                    <img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
                  </p>
                </span>
              </a>

              <div class="dropdown-menu" data-v-menu-item-recursive>
                <div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
                  <a class="dropdown-item" data-v-class-if-active="category.active" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                    <span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
                    <span data-v-if="category.content" data-v-menu-item-content>
                      <div class="row">
                        <div class="col-6 align-self-center">
                          <img src="img/demo/video-1.jpg" alt="Post" width="250" loading="lazy" class="rounded img-fluid">
                        </div>
                        <div class="col-6">
                          <h4>Features</h4>
                          <p class="text-muted">Just a few mentions, but there is more</p>
                          <ul class="list-unstyled">
                            <li class="text-primary">Page builder</li>
                            <li class="text-primary">Mega menu</li>
                            <li class="text-primary">Multi language</li>
                            <li class="text-primary">Advanced SEO</li>
                            <li class="text-primary">Ecommerce</li>
                          </ul>
                        </div>
                      </div>
                    </span>
                  </a>
                </div>
                <div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
                  <a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-class-if-active="category.active" data-v-menu-item-url>
                    <span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
                    <span data-v-menu-item-content></span>
                  </a>
                </div>
              </div>
            </li>
            <li class="nav-item dropdown" data-v-menu-item>
              <a class="nav-link dropdown-toggle" href="https://blog.vvveb.com" data-v-menu-item-url>
                <span data-v-menu-item-name>Blog</span>
              </a>

              <div class="dropdown-menu" data-v-menu-item-recursive>
                <div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
                  <a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                    <span data-v-menu-item-name data-v-if-not="category.type = 'text'">User Documentation</span>
                    <span data-v-menu-item-content></span>
                  </a>
                </div>
                <div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
                  <a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                    <span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
                    <span data-v-menu-item-content></span>
                  </a>
                </div>
              </div>
            </li>
            <li class="nav-item" data-v-menu-item>
              <a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
                <span data-v-menu-item-name>Contact</span>
              </a>
            </li>
            <li class="nav-item" data-v-menu-item>
              <a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
                <span data-v-menu-item-name>About us</span>
              </a>
            </li>
            <li class="nav-toggle">
              <!-- User Login Info -->
              <div class="dropdown user-box nav-item">
                <a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="user/index">
                  <!-- <img src="img/user.svg" loading="lazy" width="20" alt> -->
                  <i class="la la-lg la-user"></i>
                  <span class="visually-hidden">User</span>
                </a>

                <div class="dropdown-menu dropdown-menu-end login-box p-4" aria-labelledby="user-dropdown">

                  <div data-v-component-user>

                    <div class="notifications" data-v-notifications>

                      <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">

                        <div class="icon align-middle me-2">
                          <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
                        </div>

                        <div class="flex-grow-1 align-self-center text-small">
                          <div>
                            <div data-v-notification-text>
                              This is a placeholder for a notification message.
                            </div>
                          </div>
                        </div>


                        <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">
                            <!-- <i class="la la-times"></i> -->
                          </span>
                        </button>
                      </div>

                      <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">

                        <div class="icon align-middle me-2">
                          <i class="align-middle la la-2x lh-1 la-check-circle"></i>
                        </div>

                        <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
                          This is a placeholder for a success message.
                        </div>

                        <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">
                            <!-- <i class="la la-times"></i> -->
                          </span>
                        </button>
                      </div>

                      <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">

                        <div class="icon align-middle me-2">
                          <i class="align-middle la la-2x lh-1  la-info-circle"></i>
                        </div>

                        <div class="flex-grow-1 align-self-center" data-v-notification-text>
                          This is a placeholder for a info message.
                        </div>

                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">
                            <!-- <i class="la la-times"></i> -->
                          </span>
                        </button>
                      </div>

                    </div>

                    <form action method="post" enctype="multipart/form-data" data-v-url="user/login" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">

                      <input type="hidden" name="csrf" data-v-csrf>

                      <div class="login-form" data-v-if-not="component.user_id">

                        <div class="mb-3">
                          <label class="form-label" for="input-email">E-Mail Address</label>
                          <input type="email" name="email" value placeholder="E-Mail Address" id="input-email" class="form-control" required>
                        </div>

                        <div class="mb-3">
                          <label class="form-label" for="input-password">Password</label>
                          <input type="password" minlength="4" autocorrect="off" autocomplete="current-password" name="password" value="" placeholder="Password" id="input-password" class="form-control" required>
                        </div>

                        <button type="submit" value="Login" class="btn btn-primary btn-login w-100">

                          <span class="loading d-none">
                            <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                            </span>
                            <span>Authenticating</span>...
                          </span>

                          <span class="button-text">
                            Login <i class="la la-arrow-right float-end ms-2"></i>
                          </span>

                        </button>
                        <div class="my-2"></div>
                        <a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgotten Password</a>

                        <div class="my-2"></div>
                        <!--
		<a href="#">
			<span class="btn btn-secondary btn-sm">
				  <i class="lab la-google la-lg"></i>
			</span>
		</a>
		<a href="#">
			<span class="btn btn-secondary btn-sm">
			  <i class="lab la-facebook la-lg"></i>
			</span>
		</a> -->
                        <hr>
                        <span>Don’t have an account?</span>
                        <a href="/user/signup" data-v-url="user/signup/index">Register Account</a>

                      </div>


                      <div class="user-form" data-v-if="component.user_id">
                        <div class="text-center">Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
                          <b data-v-user-last_name data-filter-capitalize>Doe</b>
                        </div>

                        <div class="dropdown-divider opacity-50 my-3"></div>

                        <ul class="m-3 list-unstyled">
                          <li>
                            <a href="user" data-v-url="user/index">
                              <i class="la la-user la-lg text-muted m-1"></i>
                              <span>My account</span>
                            </a>
                          </li>
                          <li>
                            <a href="user/comments" data-v-url="user/comments/index">
                              <i class="la la-comment la-lg text-muted m-1"></i>
                              <span>Comments</span>
                            </a>
                          </li>
                          <li>
                            <a href="user/orders" data-v-url="user/orders/index">
                              <i class="la la-shopping-bag la-lg text-muted m-1"></i>
                              <span>Orders</span>
                            </a>
                          </li>
                          <li>
                            <a href="user/downloads" data-v-url="user/downloads/index">
                              <i class="la la-hand-holding-heart la-lg text-muted m-1"></i>
                              <span>Downloads</span>
                            </a>
                          </li>
                          <li>
                            <a href="user/wishlist" data-v-url="user/wishlist/index">
                              <i class="la la-download la-lg text-muted m-1"></i>
                              <span>Wishlist</span>
                            </a>
                          </li>
                          <li>
                            <a href="user/profile" data-v-url="user/profile/index">
                              <i class="la la-cogs la-lg text-muted m-1"></i>
                              <span>Profile</span>
                            </a>
                          </li>
                        </ul>


                        <input type="hidden" name="logout">

                        <button type="submit" value="logout" class="btn btn-sm btn-primary w-100">

                          <span class="loading d-none">
                            <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                            </span>
                            <span>Loading ...</span>...
                          </span>

                          <span class="button-text">
                            <i class="la la-sign-out-alt la-lg m-1"></i>
                            <span>Log out</span>
                            </a>
                          </span>

                        </button>
                      </div>
                    </form>

                  </div>
                </div>
              </div>

            </li>
            <li class="nav-toggle">
              <!-- Cart Area -->
              <div class="dropdown nav-item mini-cart" data-v-component-cart>

                <a class="dropdown-toggle cart-info nav-link " href role="button" id="cart-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="cart/cart/index">
                  <!-- <img src="img/bag.svg" width="20" alt> -->
                  <i class="la la-lg la-shopping-bag"></i>
                  <span class="visually-hidden">Cart</span>
                  <strong class="text-top text-bold" data-v-total_items data-v-if="cart.total_items > 0"></strong>
                </a>


                <div class="dropdown-menu dropdown-menu-end cart-box" aria-labelledby="cart-dropdown">

                  <div>
                    <div class="table-responsive">
                      <table class="table cart-table align-middle mb-0">
                        <tbody>


                          <tr data-v-cart-product>
                            <td class="text-center">
                              <a href="#40" data-v-cart-product-url>
                                <img src="img/demo/product.jpg" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
                              </a>
                            </td>
                            <td class="text-start">
                              <a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
                                Product name
                              </a>

                              <span data-v-cart-product-quantity>1</span>
                              <i class="la la-times text-muted"></i>
                              <span data-v-cart-product-price_tax_formatted>$123.20</span>

                              <div class="option" data-v-if="product.option">
                                <div class="" data-v-product-option>
                                  <span data-v-product-option-option>Color</span>: <span data-v-product-option-name>Red</span>
                                  <span data-v-if="value.price">(<span data-v-product-option-price></span>)</span>
                                </div>
                                <div class="" data-v-product-option>
                                  <span data-v-product-option-option>Size</span>: <span data-v-product-option-name>XL</span>
                                  <span data-v-if="value.price">(<span data-v-product-option-price></span>)</span>
                                </div>
                                <div class="" data-v-product-option>
                                  <span data-v-product-option-option>Material</span>: <span data-v-product-option-name>Wool</span>
                                  <span data-v-if="value.price">(<span data-v-product-option-price></span>)</span>
                                </div>
                              </div>

                              <div class="subscription" data-v-if="product.subscription">
                                <span data-v-product-subscription-name>Subscription plan</span>
                              </div>
                            </td>
                            <td class="text-end">
                              <a class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
                                <i class="la la-times"></i>
                              </a>
                            </td>
                          </tr>
                          <tr data-v-cart-product>
                            <td class="text-center">
                              <a href="#40" data-v-cart-product-url>
                                <img src="img/demo/product.jpg" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
                              </a>
                            </td>
                            <td class="text-start">
                              <a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
                                Product name
                              </a>

                              <span data-v-cart-product-quantity>1</span>
                              <i class="la la-times text-muted"></i>
                              <span data-v-cart-product-price_tax_formatted>$123.20</span>


                            </td>
                            <td class="text-end">
                              <a class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
                                <i class="la la-times"></i>
                              </a>
                            </td>
                          </tr>
                          <tr data-v-if-not="cart.total_items">
                            <td colspan="100">
                              <div class="d-flex  p-2">
                                <div class="text-center p-2 opacity-75">
                                  <!-- <img src="img/bag.svg" width="20" alt> -->
                                  <i class="la la-2x la-shopping-bag"></i>
                                </div>
                                <div class="p-2">
                                  <strong>Empty cart</strong>
                                  <br>
                                  <span class="text-muted">No products added yet!</span>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>

                      </table>
                    </div>

                    <div class="p-3 pt-0 border-top" data-v-if="cart.total_items">
                      <div class="table-responsive mb-2" data-v-cart-totals>
                        <table class="table mb-0 cart-table cart-total" cellspacing="0">
                          <tfoot>
                            <tr data-v-cart-total>
                              <td colspan="5" class="text-end">
                                <small data-v-cart-total-title>Sub-Total</small>:
                              </td>
                              <td class="text-end">
                                <span data-v-cart-total-text data-v-if="total.text"> - </span>
                                <span data-v-cart-total-value_formatted data-v-if="total.value > 0">$101.00</span>
                              </td>
                            </tr>
                            <tr data-v-cart-total>
                              <td colspan="5" class="text-end">
                                <small>Eco Tax (2.00):</small>
                              </td>
                              <td class="text-end">$2.00</td>
                            </tr>
                            <tr data-v-cart-total>
                              <td colspan="5" class="text-end">
                                <small>VAT (19%):</small>
                              </td>
                              <td class="text-end">$20.20</td>
                            </tr>
                            <tr data-v-cart-total>
                              <td colspan="5" class="text-end">
                                <small>Total:</small>
                              </td>
                              <td class="text-end">$123.20</td>
                            </tr>
                            <tr>
                              <td colspan="5" class="text-end">Total:</td>
                              <td class="text-end" data-v-grand-total_formatted>$0</td>
                            </tr>
                          </tfoot>

                        </table>
                      </div>

                    </div>

                    <div class="row mt-2 g-2 px-3 pb-2" data-v-if="cart.total_items">
                      <div class="col-6">
                        <a href="" class="btn btn-light btn-sm border w-100" data-v-url="cart/cart/index">
                          <i class="la la-shopping-cart la-lg"></i>
                          <span>View cart</span>
                        </a>
                      </div>
                      <div class="col-6">
                        <a href="" class="btn btn-primary btn-sm w-100" data-v-url="checkout/checkout/index">
                          <span>Checkout</span>
                          <i class="la la-arrow-right la-lg"></i>
                        </a>
                      </div>
                    </div>


                  </div>
                </div>

              </div>

            </li>
          </ul>

          <div class="search-area toggle-hover">
            <form action="/search" method="get" data-v-action="/search">
              <input type="hidden" name="route" value="search">
              <div class="input-group">
                <input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
                <button class="btn border-0" type="submit" title="Search">
                  <div class="la-flip-horizontal">
                    <i class="la la-search la-lg" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </form>
          </div>

        </div>


      </div>
    </div>
  </nav>



  <main id="site-content" role="main" class="container product" data-v-component-product>

    <nav aria-label="breadcrumb" class="text-muted text-small" data-v-component-breadcrumb>
      <ol class="breadcrumb">
        <li class="breadcrumb-item" data-v-breadcrumb-item>
          <a href="#" data-v-breadcrumb-item-url data-v-if="breadcrumb.url">
            <span data-v-breadcrumb-item-text>Home</span>
          </a>
          <span data-v-breadcrumb-item-text data-v-if-not="breadcrumb.url">Home</span>
        </li>
        <li class="breadcrumb-item" data-v-breadcrumb-item>
          <a href="#" data-v-breadcrumb-item-url data-v-if="breadcrumb.url">
            <span data-v-breadcrumb-item-text>Library</span>
          </a>
          <span data-v-breadcrumb-item-text data-v-if-not="breadcrumb.url">Library</span>
        </li>
        <li class="breadcrumb-item active" aria-current="page" data-v-breadcrumb-item>
          <span>Data</span>
        </li>
      </ol>
    </nav>

    <div class="row g-0 mb-4">
      <div class="col-md-6 col-sm-12">

        <div id="product-gallery" class="carousel slide" data-bs-ride="carousel" data-bs-touch="true" data-v-product-images>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="zoom" data-v-product-main-image-background-image>
                <img src="img/demo/product.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-main-image>
              </div>
            </div>
            <div class="carousel-item" data-v-product-image>
              <div class="zoom" data-v-product-image-background-image>
                <img src="img/demo/product.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
              </div>
            </div>
            <div class="carousel-item" data-v-product-image>
              <div class="zoom" data-v-product-image-background-image>
                <img src="img/demo/product-2.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#product-gallery" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#product-gallery" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>

        <div class="carousel">

          <div class="carousel-thumbs" data-v-product-images>
            <button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="0">
              <img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-main-image>
            </button>
            <button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="1" data-v-product-image>
              <img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
            </button>
            <button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="2" data-v-product-image>
              <img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
            </button>
            <button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="3" data-v-product-image>
              <img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
            </button>
          </div>

        </div>



      </div>

      <div class="col-md-6 col-sm-12 p-4" id="product">
        <h1 class="product-name mb-2" data-v-product-name>One Shoulder Glitter Midi Dress</h1>

        <div data-v-if="product.manufacturer_id">
          <span class="text-muted">Manufacturer</span>
          <a href="#" data-v-product-manufacturer_url>
            <span data-v-product-manufacturer_name>mango</span>
          </a>
        </div>

        <div data-v-if="product.vendor_id">
          <span class="text-muted">Vendor</span>
          <a href="#" data-v-product-vendor_url>
            <span data-v-product-vendor_name>mango</span>
          </a>
        </div>

        <div data-v-if="product.vendor_id">
          <span class="text-muted">Availability</span>
          <span data-v-product-stock_status_name>In stock</span>
        </div>



        <div class="my-2">
          <small class="text-secondary" data-v-if="product.rating">
            <i class="la la-star" data-v-class-if-text-warning="product.rating >= 1"></i>
            <i class="la la-star" data-v-class-if-text-warning="product.rating >= 2"></i>
            <i class="la la-star" data-v-class-if-text-warning="product.rating >= 3"></i>
            <i class="la la-star" data-v-class-if-text-warning="product.rating >= 4"></i>
            <i class="la la-star" data-v-class-if-text-warning="product.rating >= 5"></i>
            <!-- <i class="la la-star-half"></i> -->
          </small>
          <a href="#reviews" data-v-if="product.reviews" class="ms-2" type="button" data-bs-target="#reviews">(<span data-v-product-reviews>no</span> reviews)</a>
        </div>


        <p class="product-price" data-v-if="product.promotion">
          <span class="price" data-v-product-promotion_tax_formatted>$49.00</span>

          <span class="text-decoration-line-through text-secondary text-opacity-75" data-v-product-price_tax_formatted>$350</span>
          <small class="fs-6 ms-2 text-danger">
            <span data-v-product-promotion_discount>30</span>% Off
          </small>
        </p>

        <p class="product-price" data-v-if-not="product.promotion">
          <span class="price" data-v-product-price_tax_formatted>$49.00</span>
        </p>

        <span class="price muted small">
          <span>Excluding taxes:</span>
          <span data-v-product-price_formatted>$49.00</span>
        </span>

        <!--
				<p class="product-price fs-3">
					<span class="old-price text-muted text-small align-middle text-decoration-line-through" data-v-product-price-discount>$65.00</span>
					<span class="old-currency text-muted text-small align-middle text-decoration-line-through">$</span>
					<span class="price fw-bold" data-v-product-price_tax>$49.00</span>
					<span class="currency">$</span>
				</p>
				-->

        <!-- Form -->

        <div data-v-component-products="variant" data-v-variant="url.product_id" data-v-limit="6" data-v-image_size="thumb" data-v-page="url">
          <div data-v-if="count > 0">
            <hr class="border opacity-50">
            <h6 class="mt-2">Variants</h6>

            <div class="row g-3">
              <div class="col-sm-4 col-lg-3 col-xl-2" data-v-product>
                <div class="product">

                  <article class="card">
                    <a href="#" title="" data-v-product-url>
                      <img src="img/demo/product.jpg" alt="" class="w-100" loading="lazy" data-v-product-image>
                      <!--
						<span class="small px-2" data-v-product-name>
								Product name
						</span>
						-->
                    </a>
                  </article>

                </div>
              </div>
              <div class="col-sm-4 col-lg-3 col-xl-2" data-v-product>
                <div class="product">

                  <article class="card">
                    <a href="#" title="" data-v-product-url>
                      <img src="img/demo/product.jpg" alt="" class="w-100" loading="lazy" data-v-product-image>
                      <!--
						<span class="small px-2" data-v-product-name>
								Product name
						</span>
						-->
                    </a>
                  </article>

                </div>
              </div>
              <div class="col-sm-4 col-lg-3 col-xl-2" data-v-product>
                <div class="product">

                  <article class="card">
                    <a href="#" title="" data-v-product-url>
                      <img src="img/demo/product.jpg" alt="" class="w-100" loading="lazy" data-v-product-image>
                      <!--
						<span class="small px-2" data-v-product-name>
								Product name
						</span>
						-->
                    </a>
                  </article>

                </div>
              </div>
            </div>
          </div>
        </div>

        <form class="cart-form clearfix" method="post" action="/cart">

          <div class="cart-fav-box ">
            <!-- Cart -->
            <!-- button type="submit" name="addtocart" value="5" class="btn btn-primary" data-v-product-id data-v-vvveb-action="addToCart">Add to cart</button -->

            <input type="hidden" name="product_id" data-v-product-product_id>



            <div>
              <div id="options" class="product-options mt-4" data-v-component-product-options>
                <div data-v-if="count > 0">
                  <hr class="border opacity-50">

                  <h6>Available Options</h6>

                  <div class="form-group image" data-v-option>
                    <label class="form-label" data-v-option-name>Color</label>

                    <div data-v-if="option.type = 'radio'">
                      <div class="radio" data-v-value>
                        <label>
                          <input type="radio" name="option[1]" value="1" data-v-value-input>
                          <div>
                            <img src="img/demo/blue.gif" alt="Blue" data-v-if="value.image" data-v-value-image>
                            <span data-v-value-name>Blue</span>
                            <span data-v-if="value.price > 0">
                              (<span data-v-value-price_formatted>+$50</span>)
                            </span>
                          </div>
                        </label>
                      </div>
                      <div class="radio" data-v-value>
                        <label>
                          <input type="radio" name="option[1]" value="2" data-v-value-input>
                          <div>
                            <img src="img/demo/green.gif" alt="Green" data-v-if="value.image" data-v-value-image>
                            <span data-v-value-name>Green</span>
                            <span data-v-if="value.price > 0">
                              (<span data-v-value-price_formatted>+$50</span>)
                            </span>
                          </div>
                        </label>
                      </div>
                      <div class="radio" data-v-value>
                        <label>
                          <input type="radio" name="option[1]" value="3" data-v-value-input>
                          <div>
                            <img src="img/demo/navy.gif" alt="Navy" data-v-if="value.image" data-v-value-image>
                            <span data-v-value-name>Navy</span>
                            <span data-v-if="value.price > 0">
                              (<span data-v-value-price_formatted>+$50</span>)
                            </span>
                          </div>
                        </label>
                      </div>
                    </div>

                    <div data-v-if="option.type = 'checkbox'">
                      <div class="checkbox mb-2" data-v-value>
                        <label class="form-check-label form-control">
                          <div class="form-check">
                            <input type="checkbox" class="form-check-input" name="option[2]" value="1" data-v-value-input>
                            <img src="img/demo/blue.gif" height="32" alt="Blue" data-v-if="value.image" data-v-value-image>
                            <span data-v-value-name>Blue</span>
                            <span data-v-if="value.price > 0">
                              (<span data-v-value-price_formatted>+$50</span>)
                            </span>
                          </div>
                        </label>
                      </div>
                      <div class="checkbox mb-2" data-v-value>
                        <label class="form-check-label form-control">
                          <div>
                            <input type="checkbox" class="form-check-input" name="option[2]" value="2" data-v-value-input>
                            <img src="img/demo/green.gif" height="32" alt="Green" data-v-if="value.image" data-v-value-image>
                            <span data-v-value-name>Green</span>
                            <span data-v-if="value.price > 0">
                              (<span data-v-value-price_formatted>+$50</span>)
                            </span>
                          </div>
                        </label>
                      </div>
                      <div class="checkbox mb-2" data-v-value>
                        <label class="form-check-label form-control">
                          <div>
                            <input type="checkbox" class="form-check-input" name="option[2]" value="3" data-v-value-input>
                            <img src="img/demo/navy.gif" height="32" alt="Navy" data-v-if="value.image" data-v-value-image>
                            <span data-v-value-name>Navy</span>
                            <span data-v-if="value.price > 0">
                              (<span data-v-value-price_formatted>+$50</span>)
                            </span>
                          </div>
                        </label>
                      </div>
                    </div>

                    <div data-v-if="option.type = 'select'">
                      <select class="form-select" data-v-option-input>
                        <option value="" data-v-value>Option 1</option>
                        <option value="" data-v-value>Option 2</option>
                        <option value="" data-v-value>Option 3</option>
                      </select>
                    </div>


                    <div data-v-if="option.type = 'text'">
                      <input type="text" class="form-control" name="option[1]" value="" data-v-option-input>
                    </div>

                    <div data-v-if="option.type = 'number'">
                      <input type="number" class="form-control" name="option[1]" value="" data-v-option-input>
                    </div>

                    <div data-v-if="option.type = 'email'">
                      <input type="email" class="form-control" name="option[1]" value="" data-v-option-input>
                    </div>

                    <div data-v-if="option.type = 'textarea'">
                      <textarea class="form-control" name="option[1]" data-v-option-input></textarea>
                    </div>

                    <div data-v-if="option.type = 'file'">
                      <input type="file" class="form-control" name="option[1]" value="" data-v-option-input>
                    </div>

                    <div data-v-if="option.type = 'date'">
                      <input type="date" class="form-control" name="option[1]" value="" data-v-option-input>
                    </div>

                    <div data-v-if="option.type = 'time'">
                      <input type="time" class="form-control" name="option[1]" value="" data-v-option-input>
                    </div>

                    <div data-v-if="option.type = 'datetime'">
                      <input type="datetime-local" class="form-control" name="option[1]" value="" data-v-option-input>
                    </div>
                  </div>

                  <div class="form-group" data-v-option>
                    <label class="form-label">Size</label>

                    <div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="option[240]" value="62">
                          <div>XS</div>
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="option[240]" value="60">
                          <div>M</div>
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="option[240]" value="63">
                          <div>L</div>
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="option[240]" value="61">
                          <div>XL</div>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div id="subscriptions" class="product-subscriptions mt-4" data-v-component-product-subscriptions>
                <div data-v-if="count > 0">
                  <label class="form-label" data-v-if="count > 0">Subscription</label>
                  <div>
                    <div class="form-check form-check-inline radio" data-v-subscription>
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="subscription_plan_id" required data-v-subscription-subscription_plan_id>
                        <span data-v-subscription-name>Subscription name</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <hr class="border opacity-50">

              <div class="form-group">

                <div class="mt-4 d-inline-block">
                  <!--
									
									<label class="form-label" for="input-quantity">Qty</label>&nbsp;

									-->
                  <div class="quantity">
                    <div class="input-group spinner">
                      <button class="btn btn-minus" type="button">
                        <i class="la la-minus"></i>
                      </button>
                      <input type="number" name="quantity" value="1" size="1" id="input-quantity" class="form-control">
                      <button class="btn btn-plus" type="button">
                        <i class="la la-plus"></i>
                      </button>
                    </div>
                  </div>

                  <button type="submit" formaction="/cart/1" id="button-cart" class="btn btn-primary btn-shadow px-4 mx-2 button-cart" data-v-vvveb-action="addToCart" data-v-product-add_cart_url>

                    <span class="loading d-none">
                      <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                      </span>
                      <span>Add to cart</span>...
                    </span>

                    <span class="button-text">
                      <i class="la la-shopping-bag la-lg me-2"></i>
                      <span>Add to cart</span>
                    </span>

                  </button>
                </div>

                <div class="mt-4 d-inline-block">
                  <button type="submit" formaction="/checkout/1" id="buynow" class="btn btn-light btn-shadow border px-4 buynow" data-v-product-buy_url>

                    <span class="loading d-none">
                      <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                      </span>
                      <span>Add to cart</span>...
                    </span>

                    <span class="button-text">
                      <span>Buy now</span>
                      <i class="la la-arrow-right la-lg ms-2"></i>
                    </span>

                  </button>
                </div>

                <div class="product_wish_compare mt-4">
                  <a href="/wishlist/1" class="btn btn-sm btn-outline-secondary border-0" title="Add to wish list" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
                    <i class="la la-heart"></i>
                    <span>Add to Wish List</span>
                  </a>
                  <a href="/compare/1" class="btn btn-sm btn-outline-secondary border-0" title="Compare product" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
                    <i class="la la-random"></i>
                    <span>Compare product</span>
                  </a>
                </div>

              </div>


            </div>

          </div>
        </form>

      </div>

      <ul class="nav nav-tabs nav-scroll bg-body sticky-top mt-5" id="productTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <a class="nav-link active" id="description-tab" data-bs-target="#description" href="#description" type="button" role="tab" aria-controls="description" aria-selected="true">
            Description
          </a>
        </li>
        <li class="nav-item" role="presentation">
          <a class="nav-link" id="specifications-tab" data-bs-target="#specifications" href="#specifications" type="button" role="tab" aria-controls="specifications" aria-selected="false">
            Specifications
          </a>
        </li>
        <li class="nav-item" role="presentation">
          <a class="nav-link" id="reviews-tab" data-bs-target="#reviews" href="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">
            Reviews
          </a>
        </li>
        <li class="nav-item" role="presentation">
          <a class="nav-link" id="questions-tab" data-bs-target="#questions" href="#questions" type="button" role="tab" aria-controls="questions" aria-selected="false">
            Questions &amp; Answers
          </a>
        </li>
      </ul>

      <div class="tab-content nav-scroll" id="productTabsContent" data-bs-spy="scroll" data-bs-target="#productTabs" data-bs-root-margin="0px 0px -20%" data-bs-smooth-scroll="false">

        <div class="tab-pane show active" id="description" role="tabpanel" aria-labelledby="description-tab" tabindex="0">

          <h4>Description</h4>

          <div class="description" data-v-product-content>

            <p>All in the world know the beauty of the beautiful, and in doing this they have (the idea of) what ugliness is; they all know the skill of the skilful, and in doing this they have (the idea of) what the want of skill is.</p>

            <p>So it is that existence and nonexistence give birth the one to (the idea of) the other; that difficulty and ease produce the one (the idea of) the other; that length and shortness fashion out the one the figure of the other; that (the ideas of) height and lowness arise from the contrast of the one with the other; that the musical notes and tones become harmonious through the relation of one with another; and that being before and behind give the idea of one following another.</p>

            <p>Therefore the sage manages affairs without doing anything, and conveys his instructions without the use of speech.</p>

            <p>All things spring up, and there is not one which declines to show itself; they grow, and there is no claim made for their ownership; they go through their processes, and there is no expectation (of a reward for the results). The work is accomplished, and there is no resting in it (as an achievement).</p>

            <blockquote>
              <p>
                <span>The work is done, but how no one can see;</span>
                <br>
                <span>`This this that makes the power not cease to be.</span>
              </p>
            </blockquote>

          </div>


        </div>
        <div class="tab-pane" id="specifications" role="tabpanel" aria-labelledby="specifications-tab" tabindex="0">
          <div id="specifications" class="product-specifications mt-4" data-v-component-product-attributes>
            <h4>Specifications</h4>

            <div class="table-responsive">
              <table class="table table-bordered">
                <tbody data-v-attributes>
                  <tr data-v-group>
                    <td colspan="2">
                      <strong data-v-attribute-group>Processor</strong>
                    </td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Number of cores</td>
                    <td data-v-attribute-value>16</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Frequency</td>
                    <td data-v-attribute-value>3.6 GHZ</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>TDP</td>
                    <td data-v-attribute-value>65 W</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Lithography</td>
                    <td data-v-attribute-value>7 nm</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>L2 Cache</td>
                    <td data-v-attribute-value>3 MB</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>L3 Cache</td>
                    <td data-v-attribute-value>32 MB</td>
                  </tr>
                  <tr data-v-group>
                    <td colspan="2">
                      <strong data-v-attribute-group>Memory</strong>
                    </td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Type</td>
                    <td data-v-attribute-value>DDR4</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Capacity</td>
                    <td data-v-attribute-value>32 GB</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Frequency</td>
                    <td data-v-attribute-value>1600 MHZ</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Latency</td>
                    <td data-v-attribute-value>9 CL</td>
                  </tr>
                  <tr data-v-attribute>
                    <td data-v-attribute-name>Voltage</td>
                    <td data-v-attribute-value>1,5 V</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="reviews" role="tabpanel" aria-labelledby="reviews-tab" tabindex="0">
          <div class="product-reviews mt-4" data-v-component-reviews>
            <h4>Reviews</h4>

            <div data-v-if="count > 0">
              <div class="row border-top border-bottom py-4">
                <!--
			<div class="col-sm-2">
				<div class="rating-block text-center">
					<h2 class="text-muted mb-0" data-v-reviews-rating>4.3</h2>
					<div class="fs-3">
						<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 1"></i>
						<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 2"></i>
						<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 3"></i>
						<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 4"></i>
						<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 5"></i>
					</div>
					
					<h6 class=""><span data-v-reviews-count>15</span> reviews</h6>
				</div>
			</div>
			-->
                <div class="col-sm-6">

                  <div class="d-flex">
                    <div class="text-center">
                      <span class="display-4 fw-semibold" data-v-reviews-rating>3.1</span>
                      <br>
                      <div class="fs-3">
                        <i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 1"></i>
                        <i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 2"></i>
                        <i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 3"></i>
                        <i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 4"></i>
                        <i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 5"></i>
                      </div>
                      <span class="text-black-50">
                        <span data-v-reviews-count>15</span> reviews
                      </span>
                    </div>
                    <div class="flex-grow-1">
                      <div class="row align-items-center">
                        <div class="col-4 text-end text-secondary">
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <span class="text-muted">(<span class="" data-v-summary-five></span>)</span>
                        </div>
                        <div class="col-8">
                          <div class="progress" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" data-v-summary-five-width aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <div class="row align-items-center">
                        <div class="col-4 text-end text-secondary">
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <span class="text-muted">(<span class="" data-v-summary-four></span>)</span>
                        </div>
                        <div class="col-8">
                          <div class="progress" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" data-v-summary-four-width aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <div class="row align-items-center">
                        <div class="col-4 text-end text-secondary">
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <span class="text-muted">(<span class="" data-v-summary-three></span>)</span>
                        </div>
                        <div class="col-8">
                          <div class="progress" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" data-v-summary-three-width aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <div class="row align-items-center">
                        <div class="col-4 text-end text-secondary">
                          <i class="la la-star"></i>
                          <i class="la la-star"></i>
                          <span class="text-muted">(<span class="" data-v-summary-two></span>)</span>
                        </div>
                        <div class="col-8">
                          <div class="progress" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" data-v-summary-two-width aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                      <div class="row align-items-center">
                        <div class="col-4 text-end text-secondary">
                          <i class="la la-star"></i>
                          <span class="text-muted">(<span class="" data-v-summary-one></span>)</span>
                        </div>
                        <div class="col-8">
                          <div class="progress" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" data-v-summary-one-width aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
                <div class="col" data-v-if="product_review.buyers > 0">
                  <div class="rating-block text-center">
                    <i class="la la-check-circle text-success fs-1"></i>
                    <div class="">
                      <span data-v-reviews-buyers>5</span> reviews from buyers
                    </div>
                  </div>
                </div>
                <div class="col" data-v-if="product_review.recommendations > 0">
                  <div class="rating-block text-center">
                    <i class="la la-thumbs-up text-primary fs-1"></i>
                    <div class="">
                      <span data-v-reviews-recommendations>100</span>% recommendations
                    </div>
                  </div>
                </div>
              </div>


              <div class="border-bottom py-4">
                <h6>User contributed images</h6>

                <div class="">
                  <div class="d-inline-block" data-v-image>
                    <a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="review-gallery" data-v-image-src>
                      <img src="/image-cache/product/5-1-150x0.jpg" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>

                    </a>
                  </div>
                  <div class="d-inline-block" data-v-image>
                    <a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="review-gallery" data-v-image-src>
                      <img src="/image-cache/product/4-1-150x0.jpg" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>

                    </a>
                  </div>
                </div>
              </div>

              <ol class="review-list list-unstyled my-3">
                <li class="review mb-4" data-v-review>

                  <div class="review-wrap d-flex ">

                    <figure class="author-avatar me-2">
                      <img src="img/sections/team/1.jpg" alt="user" width="60" data-v-review-avatar loading="lazy" data-v-if="review.avatar">
                    </figure>

                    <div class="review-author">

                      <div class="review-author">
                        <a rel="external nofollow ugc" href="#" data-v-if="review.url">
                          <span data-v-review-author>Maria Williams</span>
                        </a>
                        <span data-v-review-author data-v-if-not="review.url">Maria Williams</span>
                      </div>

                      <div class="d-inline-block">
                        <small class="text-secondary" data-v-if="product.rating">
                          <i class="la la-star" data-v-class-if-text-warning="review.rating >= 1"></i>
                          <i class="la la-star" data-v-class-if-text-warning="review.rating >= 2"></i>
                          <i class="la la-star" data-v-class-if-text-warning="review.rating >= 3"></i>
                          <i class="la la-star" data-v-class-if-text-warning="review.rating >= 4"></i>
                          <i class="la la-star" data-v-class-if-text-warning="review.rating >= 5"></i>
                          <!-- <i class="la la-star-half"></i> -->
                        </small>
                      </div>

                      <div class="review-meta text-small text-muted d-inline-block">
                        <span data-v-review-created_at data-filter-friendly_date>Jan 29, 2018</span>
                      </div>

                    </div>

                  </div>


                  <div class="my-2" data-v-review-content>
                    <p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
                  </div>

                  <div class="alert alert-light my-2 small" data-v-if="review.status = 0">
                    <div>Your review is awaiting moderation.</div>
                    <div>This is a preview, your review will be visible after it has been approved.</div>
                  </div>

                  <div>
                    <div class="user-image" data-v-user-image>
                      <a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="user-gallery" data-v-image-src>
                        <img src="/image-cache/product/5-1-150x0.jpg" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>

                      </a>
                    </div>
                    <div class="user-image" data-v-user-image>
                      <a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="user-gallery" data-v-image-src">
                        <img src="/image-cache/product/4-1-150x0.jpg" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>

                      </a>
                    </div>
                  </div>

                  <div class="reply">
                    <a href="#review-form" class="reply-btn" data-review_id="{$review.review_id}" data-review_author="{$review.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
                    </a>
                  </div>

                </li>
                <li class="review mb-4 level-2" data-v-review>

                  <div class="review-wrap d-flex ">

                    <figure class="author-avatar me-2">
                      <img src="http://place-hold.it/60x60" alt="user" width="60" data-v-review-avatar loading="lazy" data-v-if="review.avatar">
                    </figure>

                    <div class="review-author">

                      <div class="review-author">
                        <span data-v-review-author data-v-if-not="review.url">John doe</span>
                      </div>

                      <div class="review-meta text-small text-muted">
                        <span data-v-review-created_at data-filter-friendly_date>Jan 29, 2018</span>
                      </div>

                    </div>

                  </div>


                  <div class="my-2" data-v-review-content>
                    <p>This is a reply review.</p>
                  </div>

                  <div class="alert alert-light my-2 small" data-v-if="review.status = 0">
                    <div>Your review is awaiting moderation.</div>
                    <div>This is a preview, your review will be visible after it has been approved.</div>
                  </div>

                  <div class="reply">
                    <a href="#review-form" class="reply-btn" data-review_id="{$review.review_id}" data-review_author="{$review.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
                    </a>
                  </div>

                </li>
                <li class="review mb-4" data-v-review>

                  <div class="review-wrap d-flex ">

                    <figure class="author-avatar me-2">
                      <img src="img/sections/team/1.jpg" alt="user" width="60" data-v-review-avatar loading="lazy" data-v-if="review.avatar">
                    </figure>

                    <div class="review-author">

                      <div class="review-author">
                        <a rel="external nofollow ugc" href="#" data-v-if="review.url">
                          <span data-v-review-author>Maria Williams</span>
                        </a>
                        <span data-v-review-author data-v-if-not="review.url">Maria Williams</span>
                      </div>

                      <div class="review-meta text-small text-muted">
                        <span data-v-review-created_at data-filter-friendly_date>Jan 29, 2018</span>
                      </div>

                    </div>

                  </div>

                  <div data-v-review-content>
                    <p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
                  </div>

                  <div class="alert alert-light my-2 small" data-v-if="review.status = 0">
                    <div>Your review is awaiting moderation.</div>
                    <div>This is a preview, your review will be visible after it has been approved.</div>
                  </div>

                  <div class="reply">
                    <a href="#review-form" class="reply-btn" data-review_id="{$review.review_id}" data-review_author="{$review.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
                    </a>
                  </div>

                </li>
              </ol>

            </div>

            <div data-v-if="count = 0">
              <div class=" p-4 mb-4 bg-body-tertiary border">
                <h6>Be the first to write a review!</h6>
              </div>
            </div>

            <div class="notifications" data-v-notifications>

              <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>

                <div class="icon align-middle me-2">
                  <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
                </div>

                <div class="flex-grow-1 align-self-center text-small">
                  <div>
                    <div data-v-notification-text>
                      This is a placeholder for a notification message.
                    </div>
                  </div>
                </div>


                <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">
                    <!-- <i class="la la-times"></i> -->
                  </span>
                </button>
              </div>

              <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success>

                <div class="icon align-middle me-2">
                  <i class="align-middle la la-2x lh-1 la-check-circle"></i>
                </div>

                <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
                  This is a placeholder for a success message.
                </div>

                <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">
                    <!-- <i class="la la-times"></i> -->
                  </span>
                </button>
              </div>

              <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>

                <div class="icon align-middle me-2">
                  <i class="align-middle la la-2x lh-1  la-info-circle"></i>
                </div>

                <div class="flex-grow-1 align-self-center" data-v-notification-text>
                  This is a placeholder for a info message.
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">
                    <!-- <i class="la la-times"></i> -->
                  </span>
                </button>
              </div>

            </div>

            <button data-bs-toggle="collapse" href="#reviews-form" role="button" aria-expanded="false" aria-controls="reviews-form" class="btn btn-light border">
              <span>Leave review</span>
              <i class="la la-angle-down ms-2"></i>
            </button>

            <div class="reviews-form collapse mt-4" id="reviews-form">


              <h5>Leave a review</h5>
              <span class="replyto" style="display:none">
                <h3>Reply to <b data-review-author>author</b>
                </h3>
                <a href="#review-form" class="reply-btn d-inline-block" data-review_id="0" data-v-vvveb-action="replyTo">
                  Cancel review
                  <i class="la la-window-close"></i>
                </a>
              </span>


              <div class="loggedin mb-3" data-v-if="this.global.user_id">
                <!--
			<a href="#review-form" class="reply-btn d-inline-block" data-review_id="0" data-v-vvveb-action="replyTo">
			Log out
			<i class="la la-window-close"></i></a>
			-->

                <form action method="post" enctype="multipart/form-data" data-v-url="user/login" data-selector=".product-reviews">

                  <span>Logged in as <b data-v-global-user.display_name>author</b>
                  </span>

                  <input type="hidden" name="logout">

                  <button type="submit" value="logout" class="btn link-primary btn-submit">

                    <span class="loading d-none">
                      <span class="spinner-border spinner-border-sm align-middle" role="status">
                      </span>
                      <span>Loading ...</span>...
                    </span>

                    <span class="button-text">
                      Logout <i class="la la-sign-out-alt"></i>
                      </a>
                    </span>

                  </button>
                </form>

              </div>

              <form id="review-form" method="post" action="#" data-v-vvveb-action="addReview" data-v-vvveb-on="submit">

                <input type="hidden" name="product_id" data-v-product-product_id>
                <input type="hidden" name="slug" data-v-product-slug>
                <input type="hidden" name="parent_id" value="0">
                <input type="hidden" name="csrf" data-v-csrf>

                <!-- antibot do not fill -->
                <input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">


                <div data-v-if-not="this.global.user_id">
                  <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Name</label>
                    <input type="text" placeholder="Name" name="author" class="form-control" required>
                  </div>
                  <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Email address</label>
                    <input type="email" placeholder="Email" name="email" class="form-control" required>
                  </div>
                </div>

                <div class="mb-3">
                  <input type="radio" name="rating" value="1" id="onestar" class="form-check-input btn-check" required>
                  <label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="onestar">
                    <i class="la la-lg la-star text-warning"></i>
                    1 <span>Star</span>
                  </label>
                  <input type="radio" name="rating" value="2" id="twostars" class="form-check-input btn-check" required>
                  <label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="twostars">
                    <i class="la la-lg la-star text-warning"></i>
                    2 <span>Stars</span>
                  </label>
                  <input type="radio" name="rating" value="3" id="threestars" class="form-check-input btn-check" required>
                  <label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="threestars">
                    <i class="la la-lg la-star text-warning"></i>
                    3 <span>Stars</span>
                  </label>
                  <input type="radio" name="rating" value="4" id="fourstars" class="form-check-input btn-check" required>
                  <label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="fourstars">
                    <i class="la la-lg la-star text-warning"></i>
                    4 <span>Stars</span>
                  </label>
                  <input type="radio" name="rating" value="5" id="fivestars" class="form-check-input btn-check" checked required>
                  <label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="fivestars">
                    <i class="la la-lg la-star text-warning"></i>
                    5 <span>Stars</span>
                  </label>
                </div>

                <div class="mb-3">
                  <textarea name="content" rows="5" cols="4" placeholder="Enter product review ..." class="form-control" required></textarea>
                </div>

                <!-- if these hidden inputs are filled then ignore robots -->
                <input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">

                <input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">

                <button type="submit" value="review" class="btn btn-primary btn-submit">
                  <span class="loading d-none">
                    <span class="spinner-border spinner-border-sm align-middle" role="status"> </span>
                    <span>Posting</span>...
                  </span>

                  <span class="button-text">
                    <span>Post review</span>
                    <i class="la la-long-arrow-alt-right ms-1"></i>
                  </span>
                </button>

              </form>

            </div>
          </div>

        </div>
        <div class="tab-pane" id="questions" role="tabpanel" aria-labelledby="questions-tab" tabindex="0">
          <div class="product-questions mt-4" data-v-component-questions>
            <h4 class="border-top pt-4">Questions and answers</h4>

            <ol class="question-list list-unstyled my-3">
              <li class="question mb-4" data-v-question>

                <div class="question-wrap d-flex ">

                  <figure class="author-avatar me-2">
                    <img src="img/sections/team/1.jpg" alt="user" width="60" data-v-question-avatar loading="lazy" data-v-if="question.avatar">
                  </figure>

                  <div class="question-author">

                    <div class="question-author">
                      <a rel="external nofollow ugc" href="#" data-v-if="question.url">
                        <span data-v-question-author>Maria Williams</span>
                      </a>
                      <span data-v-question-author data-v-if-not="question.url">Maria Williams</span>
                    </div>

                    <div class="question-meta text-small text-muted">
                      <span data-v-question-created_at data-filter-friendly_date>Jan 29, 2018</span>
                    </div>

                  </div>

                </div>


                <div class="my-2" data-v-question-content>
                  <p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
                </div>

                <div class="alert alert-light my-2 small" data-v-if="question.status = 0">
                  <div>Your question is awaiting moderation.</div>
                  <div>This is a question, your question will be visible after it has been approved.</div>
                </div>

                <div class="reply">
                  <a href="#question-form" class="reply-btn" data-question_id="{$question.question_id}" data-question_author="{$question.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
                  </a>
                </div>

              </li>
              <li class="question mb-4 level-2" data-v-question>

                <div class="question-wrap d-flex ">

                  <figure class="author-avatar me-2">
                    <img src="http://place-hold.it/60x60" alt="user" width="60" data-v-question-avatar loading="lazy" data-v-if="question.avatar">
                  </figure>

                  <div class="question-author">

                    <div class="question-author">
                      <span data-v-question-author data-v-if-not="question.url">John doe</span>
                    </div>

                    <div class="question-meta text-small text-muted">
                      <span data-v-question-created_at data-filter-friendly_date>Jan 29, 2018</span>
                    </div>

                  </div>

                </div>


                <div class="my-2" data-v-question-content>
                  <p>This is a reply question.</p>
                </div>

                <div class="alert alert-light my-2 small" data-v-if="question.status = 0">
                  <div>Your question is awaiting moderation.</div>
                  <div>This is a question, your question will be visible after it has been approved.</div>
                </div>

                <div class="reply">
                  <a href="#question-form" class="reply-btn" data-question_id="{$question.question_id}" data-question_author="{$question.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
                  </a>
                </div>

              </li>
              <li class="question mb-4" data-v-question>

                <div class="question-wrap d-flex ">

                  <figure class="author-avatar me-2">
                    <img src="img/sections/team/1.jpg" alt="user" width="60" data-v-question-avatar loading="lazy" data-v-if="question.avatar">
                  </figure>

                  <div class="question-author">

                    <div class="question-author">
                      <a rel="external nofollow ugc" href="#" data-v-if="question.url">
                        <span data-v-question-author>Maria Williams</span>
                      </a>
                      <span data-v-question-author data-v-if-not="question.url">Maria Williams</span>
                    </div>

                    <div class="question-meta text-small text-muted">
                      <span data-v-question-created_at data-filter-friendly_date>Jan 29, 2018</span>
                    </div>

                  </div>

                </div>

                <div class="my-2" data-v-question-content>
                  <p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
                </div>

                <div class="alert alert-light my-2 small" data-v-if="question.status = 0">
                  <div>Your question is awaiting moderation.</div>
                  <div>This is a question, your question will be visible after it has been approved.</div>
                </div>

                <div class="reply">
                  <a href="#question-form" class="reply-btn" data-question_id="{$question.question_id}" data-question_author="{$question.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
                  </a>
                </div>

              </li>
            </ol>

            <div class="notifications" data-v-notifications>

              <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>

                <div class="icon align-middle me-2">
                  <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
                </div>

                <div class="flex-grow-1 align-self-center text-small">
                  <div>
                    <div data-v-notification-text>
                      This is a placeholder for a notification message.
                    </div>
                  </div>
                </div>


                <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">
                    <!-- <i class="la la-times"></i> -->
                  </span>
                </button>
              </div>

              <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success>

                <div class="icon align-middle me-2">
                  <i class="align-middle la la-2x lh-1 la-check-circle"></i>
                </div>

                <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
                  This is a placeholder for a success message.
                </div>

                <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">
                    <!-- <i class="la la-times"></i> -->
                  </span>
                </button>
              </div>

              <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>

                <div class="icon align-middle me-2">
                  <i class="align-middle la la-2x lh-1  la-info-circle"></i>
                </div>

                <div class="flex-grow-1 align-self-center" data-v-notification-text>
                  This is a placeholder for a info message.
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">
                    <!-- <i class="la la-times"></i> -->
                  </span>
                </button>
              </div>

            </div>

            <button data-bs-toggle="collapse" href="#questions-form" role="button" aria-expanded="false" aria-controls="questions-form" class="btn btn-light border">
              <span>Ask question</span>
              <i class="la la-angle-down ms-2"></i>
            </button>

            <div class="questions-form collapse mt-4" id="questions-form">


              <h5>Leave a reply</h5>
              <span class="replyto" style="display:none">
                <h3>Reply to <b data-question-author>author</b>
                </h3>
                <a href="#question-form" class="reply-btn d-inline-block" data-question_id="0" data-v-vvveb-action="replyTo">
                  Cancel reply
                  <i class="la la-window-close"></i>
                </a>
              </span>


              <div class="loggedin mb-3" data-v-if="this.global.user_id">
                <!--
			<a href="#question-form" class="reply-btn d-inline-block" data-question_id="0" data-v-vvveb-action="replyTo">
			Log out
			<i class="la la-window-close"></i></a>
			-->

                <form action method="post" enctype="multipart/form-data" data-v-url="user/login" data-selector=".product-questions">

                  <span>Logged in as <b data-v-global-user.display_name>author</b>
                  </span>

                  <input type="hidden" name="logout">

                  <button type="submit" value="logout" class="btn link-primary">

                    <span class="loading d-none">
                      <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                      </span>
                      <span>Loading ...</span>...
                    </span>

                    <span class="button-text">
                      Logout <i class="la la-sign-out-alt"></i>
                      </a>
                    </span>

                  </button>
                </form>

              </div>

              <form id="question-form" method="post" action="#" data-v-vvveb-action="addQuestion" data-v-vvveb-on="submit">

                <input type="hidden" name="product_id" data-v-product-product_id>
                <input type="hidden" name="slug" data-v-product-slug>
                <input type="hidden" name="parent_id" value="0">
                <input type="hidden" name="csrf" data-v-csrf>

                <!-- antibot do not fill -->
                <input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">


                <div data-v-if-not="this.global.user_id">
                  <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Name</label>
                    <input type="text" placeholder="Name" name="author" class="form-control" required>
                  </div>
                  <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Email address</label>
                    <input type="email" placeholder="Email" name="email" class="form-control" required>
                  </div>
                </div>

                <div class="mb-3">
                  <textarea name="content" rows="5" cols="4" placeholder="Enter product question ..." class="form-control" required></textarea>
                </div>

                <!-- if these hidden inputs are filled then ignore robots -->
                <input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">

                <input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">

                <button type="submit" value="question" class="btn btn-primary btn-submit">
                  <span class="loading d-none">
                    <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
                    <span>Posting</span>...
                  </span>

                  <span class="button-text">
                    <span>Post question</span>
                    <i class="la la-long-arrow-alt-right ms-1"></i>
                  </span>
                </button>

              </form>
            </div>

          </div>

        </div>
      </div>


      <div data-v-component-products="index" data-v-related="url.product_id" data-v-limit="6" data-v-page="url">
        <div data-v-if="count > 0">
          <h3 class="mt-5">Related products</h3>
          <div class="row g-3">
            <div class="col-md-6 col-lg-4 col-xl-3" data-v-product>
              <div class="product">

                <article class="single-product-wrapper">
                  <!-- Product Image -->
                  <a href="product/product.html" data-v-product-url> </a>
                  <div class="product-image">
                    <a href="product/product.html" data-v-product-url>

                      <img src="img/demo/product.jpg" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-product-image />

                      <!-- Hover Thumb -->
                      <img class="hover-img" src="img/demo/product-2.jpg" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
                    </a>

                    <!-- Favourite -->
                    <div class="product-favourite">
                      <a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
                        <span></span>
                      </a>
                    </div>

                    <!-- Compare -->
                    <div class="product-compare">
                      <a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
                        <span></span>
                      </a>
                    </div>
                  </div>

                  <!-- Product Description -->
                  <div class="product-content">

                    <a href="product/product.html" class="text-body" data-v-product-url>
                      <span data-v-product-name>Product 8</span>
                    </a>

                    <p class="product-price" data-v-if="_product.price > 0" data-v-product-price_tax_formatted>100.0000</p>

                    <!-- Hover Content -->
                    <div class="hover-content" data-v-if="_product.price > 0">
                      <!-- Add to Cart -->
                      <div class="add-to-cart-btn">
                        <input type="hidden" name="product_id" value="" data-v-product-product_id />
                        <a href="" class="btn btn-primary w-100" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
                          <span class="loading d-none">
                            <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
                            <span>Add to cart</span>...
                          </span>

                          <span class="button-text">
                            Add to cart
                          </span>
                        </a>
                      </div>
                    </div>
                  </div>
                </article>


              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>


  <footer class="footer-1" title="footer-1" data-v-save-global="index.html,.footer-1">
    <div class="container" data-v-component-menu="footer" data-v-slug="main-footer">

      <div class="row" data-v-menu-items>

        <div class="col-md">

          <div data-v-component-site>
            <img src="img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
            <img src="img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
          </div>

        </div>


        <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
          <div class="h6" data-v-menu-item-name>Vvveb</div>
          <nav data-v-menu-item-recursive>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="https://themes.vvveb.com/" data-v-menu-item-url>
                <span data-v-menu-item-name>Themes</span>
              </a>
            </div>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="https://plugins.vvveb.com/" data-v-menu-item-url>
                <span data-v-menu-item-name>Plugins</span>
              </a>
            </div>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="content/index.html" data-v-menu-item-url>
                <span data-v-menu-item-name>Blog</span>
              </a>
            </div>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="product/index.html" data-v-menu-item-url>
                <span data-v-menu-item-name>Shop</span>
              </a>
            </div>
          </nav>
        </div>

        <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
          <div class="h6" data-v-menu-item-name>Resources</div>
          <nav data-v-menu-item-recursive>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                <span data-v-menu-item-name>User documentation</span>
              </a>
            </div>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                <span data-v-menu-item-name>Developer documentation</span>
              </a>
            </div>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="pricing.html" data-v-menu-item-url>
                <span data-v-menu-item-name>Pricing</span>
              </a>
            </div>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="services.html" data-v-menu-item-url>
                <span data-v-menu-item-name>Services</span>
              </a>
            </div>
          </nav>
        </div>

        <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
          <div class="h6" data-v-menu-item-name>Contact</div>
          <nav data-v-menu-item-recursive>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="" href="contact.html">Contact us</a>
              <a href="" href="portfolio.html">Portfolio</a>
              <a href="" href="about.html">About us</a>
              <a href="" href="user/return-form.html">Return form</a>
            </div>
          </nav>
        </div>

        <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
          <div class="h6" data-v-menu-item-name>My account</div>
          <nav data-v-menu-item-recursive>
            <div data-v-menu-item data-v-if="category.children == 0">
              <a href="" href="user/order-tracking.html">Order tracking</a>
              <a href="" href="user/wishlist.html">Wishlist</a>
              <a href="" href="user/orders.html">Orders</a>
              <a href="" href="cart/compare.html">Compare</a>
            </div>
          </nav>
        </div>



      </div>
      <!--
		<div class="row justify-content-end">
			<div class="col-md-3 text-muted text-small mt-5">
				&copy; <span data-v-year>2023</span> <span data-v-sitename>Vvveb</span>. Powered by <a href="https://vvveb.com" target="_blank">Vvveb</a>	
			</div>
		</div>
		-->

    </div>

    <div class="footer-copyright">
      <div class="container">
        <div class="d-flex flex-column flex-md-row">
          <div class="text-muted flex-grow-1">
            <a class="btn-link text-muted" href="content/page.html">Terms and conditions</a> |
            <a class="btn-link text-muted" href="content/page.html">Privacy Policy</a>
          </div>
          <div class="text-muted">
            &copy; <span data-v-year>2023</span>
            <span data-v-global-site.title>Vvveb</span>. <span>Powered by</span>
            <a href="https://vvveb.com" class="btn-link text-muted" target="_blank">Vvveb</a>
          </div>
        </div>
      </div>
    </div>

  </footer>



  <div class="bg-image"></div>

  <div class="alert alert-light alert-dismissible fade alert-top" role="alert" style="display:none">
    <div class="container">

      <div class="message">
        Product was added to cart.
      </div>


      <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
    </div>
  </div>

  <!-- Vvveb Common Js -->
  <script id="popper-js" src="../../js/popper.min.js"></script>
  <!-- <script src="../../js/bootstrap.min.js"></script> -->
  <!-- <script src="../../js/bootstrap.bundle.min.js"></script> -->
  <script id="bootstrap-js" src="js/bootstrap.min.js"></script>
  <!-- Vvveb Ajax Common Js -->
  <script id="app-js" src="../../js/app.js"></script>

  <!-- Animation -->

  <link rel="stylesheet" href="js/aos.css">
  <noscript>
    <style type="text/css">
      [data-aos] {
        opacity: 1 !important;
        transform: translate(0) scale(1) !important;
      }
    </style>
  </noscript>

  <script src="js/aos.js"></script>
  <script src="js/theme.js"></script>

  <script>
	AOS.init();
</script>



  <script>
document.querySelector('.carousel-item').classList.add("active");
/*
//anchors not working properly due to base href, add full url to anchors
$('a[href^="#"]').attr("href", function (i,a) {
	return window.location.href + a;
});
$('a[href^="#"]').on("click", function (e) {
	window.location.hash = this.attributes.href.value;
});
*/
document.addEventListener('click',function (e) {
	let element = e.target.closest('a[href^="#"]');
	if (element) {
		let target = element.hash,
		//window.location.hash = element.attributes.href.value;
		$target = document.querySelector(target);
		//window.location.hash = target;

		document.firstElementChild.scroll({
		  top: $target.offsetTop - 200,//substract header height,
		  behavior: "smooth",
		});
		
		e.preventDefault();
		return false;
	}
});
</script>

</body>

</html>